<template>
  <div>
      <div v-for="item in friends" :key="item.userId" class="contact-content">
        <el-badge is-dot class="item-hasbadge" v-show="item.hasNews">
          <el-link type="primary" :underline="false" @click="selectContacts(item.userId)">{{item.name}}</el-link>
        </el-badge>
        <div class="item-nobadge" v-show="!item.hasNews">
          <el-link type="primary" :underline="false"  @click="selectContacts(item.userId)">{{item.name}}</el-link>
        </div>
      </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { EventBus } from "../components/event-bus.js";
export default {
  data() {
    return {
      friends:[],
      newsFromUserIds:[]
    };
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  mounted() {
    var _this = this;
    //选择联系人
    EventBus.$on("news", function(newsFromUserId) {
      for(var i = 0;i<_this.friends.length;i++){
          if(_this.friends[i].userId == newsFromUserId){
            _this.friends[i].hasNews = true;
            break;
          }
      }
      _this.$forceUpdate();
    });
  },
  methods: {
    selectContacts(userId){
      EventBus.$emit('change-contact',userId)
      for(var i = 0;i<this.friends.length;i++){
          if(this.friends[i].userId == userId){
            this.friends[i].hasNews = false;
            break;
          }
      }
       this.$forceUpdate();
    }
  },
  created() {
    this.friends = this.user.friends;
  }
};
</script>
<style scoped>
.contact-content{
    height: 60px;
    margin-top:20px;
    width: 100%;
    text-align: center;
}
.item-hasbadge{
    width: 90%;
    border: 1px solid #e6a23c;
    background-color: white;
    height: 50px;
    line-height: 50px;
}
.item-nobadge{
    width: 90%;
    background-color: white;
    height: 50px;
    line-height: 50px;
    display: inline-block;
}
</style>

